<template>
  <div id="index" class="text-center bg-white">
    <Swiper />
    <!-- 视频 -->
    <section class="video-area flex-col w-full">
      <h3 class="h3-t">我们提供的服务</h3>
      <p class="desc">小熊猫上门跳舞，让你的家人生日更快乐</p>
      <div class="video">
        <video 
          id="video"
          src="https://xmbzwww.oss-cn-shenzhen.aliyuncs.com/video/index_video.mp4"
          poster="https://xmbzwww.oss-cn-shenzhen.aliyuncs.com/video/index_video.mp4?x-oss-process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast"
          width="100%"
          preload="metadata"
          controls="true"
          playsinline
          controlslist="nodownload"
        />
      </div>
    </section>
    <!-- 食材 -->
    <section class="ingredients w-full" :class="ingredientsToP ? 'to-top' : ''">
      <h3 class="h3-t">精选食材</h3>
      <ul class="flex flex-wrap w-full justify-between father-ul">
        <li v-for="(item, index) in materialArr" :key="index">
          <img  class="w-full h-full" :src="item.src">
          <div class="pic_info">
              <h5>{{ item.title }}</h5>
              <p>{{ item.desc }}</p>
            </div>
        </li>
      </ul>
    </section>
    <!-- 厨师 -->
    <section class="chef w-full" :class="chefToToP ? 'to-top' : ''">
      <h3 class="h3-t">我们的五星级名厨</h3>
      <p class="desc leading-3">来自希尔顿、喜来登等五星级酒店运用专业的糕点 <br />工艺和匠心精神，让每款蛋糕好吃又好看。</p>
      <img src="/imgs/index/chef.png"  class="m-auto">
    </section>
    <!-- 合作客户 -->
    <section class="cooperation w-full" >
      <h3 class="h3-t">合作客户</h3>
      <div class="scroll-box w-full "></div>
    </section>
  </div>
</template>

<script lang="ts">
import Swiper from '@/components/Swiper.vue'
import {ma_1, ma_2, ma_3, ma_4} from '@/const/index'
export default {
  head() {
    return {
      meta: [{
        hid: 'keywords',
        name: 'keywords',
        content: '熊猫不走、熊猫蛋糕、熊猫不走蛋糕、生日蛋糕、蛋糕预定、熊猫跳舞、水果蛋糕、慕斯蛋糕、奶油蛋糕、芝士蛋糕、动物奶油蛋糕、私人定制'
      }]
    }
  },
  components: {
    Swiper,
  },
  setup() {
    const materialArr = ref([
      {
        src: ma_1,
        title: '砂糖',
        desc: '精致幼砂糖',
      },
      {
        src: ma_2,
        title: '芝士',
        desc: '浓郁芝士',
      },
      {
        src: ma_3,
        title: '奶油',
        desc: '香醇奶油',
      },
      {
        src: ma_4,
        title: '巧克力',
        desc: '丝滑巧克力',
      },
    ])
    const videoToTop = ref(false)
    const ingredientsToP = ref(false)
    const chefToToP = ref(false)
    const clientToTop = ref(false)
    const handlerScroll = ()=> {
      var myScrollTop = document.documentElement.scrollTop || document.body.scrollTop
      myScrollTop >= 20 ? videoToTop.value = true : videoToTop.value = false
      myScrollTop >= 400  ? ingredientsToP.value = true : ingredientsToP.value = false
      myScrollTop >= 750  ? chefToToP.value = true : chefToToP.value = false
      myScrollTop >= 1050  ? clientToTop.value = true : clientToTop.value = false
    }
    onMounted(() => {
      window.addEventListener('scroll', handlerScroll, true)
    })
    return {
      materialArr,
      videoToTop,ingredientsToP,chefToToP,clientToTop
    };
  },
};
</script>
<style lang="scss" scoped>
#index {
  .h3-t {
    font: 400 16px 'PingFang SC';
  }
  .desc {
    font: 400 12px 'PingFang SC';
    color: #4C4C4C;
  }
  .video-area {
    transform: translateY(160px);
    flex-direction: column;
    justify-content: center;
    height: 288px;
    width: 100%;
    padding: 32px 10px 0;
    animation: init-video .5s forwards;
    @keyframes init-video {
      0% {transform: translateY(160px); opacity: 0 }
      100% {transform: translateY(0px); opacity: 1 }
    }
    .desc {
      margin: 7px auto 15px;
    }
    .video {
      width: 100%;
      height: 194px;
      #video {
        width: 100% !important;
        height: 100% !important;
        object-fit: fill;
        border-radius: 4px;
        // height: 194px;
      }
    }
   
  }
  .ingredients {
    transform: translateY(160px);
    height: 412.7px;
    padding: 31.2px 15px 0;
    h3 {
      margin-bottom: 15px;
    }
    ul {
      height: 344.5px;
      li {
        width: 167.75px;
        height: 167.75px;
        margin-bottom: 9px;
        position: relative;
        img {
          border-radius: 4px;
        }
        .pic_info {
          position: absolute;
          bottom: 10px;
          right: 10%;
          width: 80%;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 4px;
          padding: 2px;
          h5 {
            font: 400 16px 'Microsoft YaHei';
            color: #5a230a;
            letter-spacing: 2px;
          }
          p {
            font-size: 12px;
            letter-spacing: 2px;
            color: #4c4c4c;
          }
        }
      }
    }
  }
  .chef {
    transform: translateY(160px);
    height: 282.49px;
    padding-top: 32.49px;
    .desc {
      line-height: 17px;
      margin-bottom: 15px;
    }
    img {
      width:311.57px;
      height: 179px;
    }
  }
  .cooperation {
    height: 325px;
    padding: 32px 0 25px;
    background-color: #f6f6f6;
    h3 {
      margin-bottom: 15px;
    }
    .scroll-box {
      position: relative;
      height: 224px;
      background: url('/imgs/index/loop-img.png') ;
      background-size: cover;
      animation: likes 60s linear infinite forwards;
      &::before {
        position: absolute;
        top: 0%;
        left: 0%;
        content: '';
        width: 49px;
        height: 249px;
        background: linear-gradient(269.8deg, #F6F6F6 56.29%, rgba(246, 246, 246, 0.5) 81.25%, rgba(246, 246, 246, 0) 99.83%);
        transform: rotate(-180deg);
      }
    &::after {
        position: absolute;
        top: 0%;
        right: 0%;
        content: '';
        width: 49px;
        height: 249px;
        background: linear-gradient(269.8deg, #F6F6F6 56.29%, rgba(246, 246, 246, 0.5) 81.25%, rgba(246, 246, 246, 0) 99.83%);
      }
    }
    @keyframes likes {
      to {
        background-position: -1920px 0;
      }
    }
  }
  .to-top {
    animation: to-top .5s forwards;
    @keyframes to-top {
      0% {transform: translateY(160px); opacity: 0; }
      100% {transform: translateY(0px); opacity: 1; }
    }
  }

}
</style>